<template>
  <div class="createSign">
      <div class="createSign-title">
        <h3><i></i>{{title}}</h3>
      </div>
      <div class="createSign-main">
        <div class="upload-box" v-if="isUpload">
          <el-upload
            class="upload-demo"
            ref="upload"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleChangeFile"
            :on-remove="handleRemove"
            :multiple="false"
            :auto-upload="false"
            >
            <div class="upload-demo-box">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                点击或将文件拖拽到这里上传
                <p>支持扩展名： .doc .docx .pdf .jpg...</p>
              </div>
            </div>
          </el-upload>
          <div class="upload-messages">
            <p class="upload-messages-title"><i class="el-icon-info"></i>使用指引：</p>
            <div class="upload-messages-main">
              <p>1）在电脑本地编辑好文件内容，然后上传签署合同文件；</p>
              <p>2）设置签字（盖章）位置，提交给复核员审核；</p>
              <p>3）复核员审核确认无问题后，发起签署，推送到客户APP上；</p>
              <p>4）签署人在有财邦APP上完成文件签署；</p>
              <p>5）客户经理在合约管理后台晚上银行签署；</p>
            </div>
          </div>
        </div>
        <div class="file-message-box" v-else>
          <div class="file-pic">
            <div class="file-pic-title">
              {{fileName}}
            </div>
            <pdf class="file-pic-pdf" ref="pdf" :src="pdfUrl"></pdf>
          </div>
          <div class="file-message">
            <div class="file-message-item">
              <span>文件名称：</span>
              <el-input size="small" v-model="fileName" placeholder="请输入内容"></el-input>
            </div>
            <div class="file-message-item">
              <span>文件编号：</span>
              <i>{{fileNumber}}</i>
            </div>
            <div class="file-message-item">
              <span>文件大小：</span>
              <i>{{fileSize}}</i>
            </div>
          </div>
        </div>
      </div>
      <div class="next-btn">
        <el-button type="primary" size="small" @click="nextPage">{{nextTitle}}</el-button>
        <el-button plain size="small" @click="backPage">{{backTitle}}</el-button>
      </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  data () {
    return {
      title: '新建签署',
      fileList: [],
      nextTitle: '下一步：设置签署位置',
      isUpload: true,
      fileName: '贷款服务合同.doc',
      pdfUrl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
      backTitle: '取消',
      fileNumber: '20200830-123456',
      fileSize: '2页  |  77.0k',
      count: '1'
    }
  },
  components: {
    pdf
  },
  methods: {
    handlePreview (file) {
      console.log(file)
    },
    nextPage () {
      if (this.fileList.length === 0) {
        alert('请先上传文件')
      } else if (this.fileList.length > 0) {
        this.count++
        this.isUpload = false
        this.backTitle = '返回'
        if (this.count === 3) {
          window.sessionStorage.setItem('setTemplate', 'false')
          this.$router.push('/setsigna')
        }
      }
    },
    handleChangeFile (file, fileList) {
      this.fileList = fileList
      console.log(fileList)
    },
    handleRemove (file, fileList) {
      this.fileList = fileList
      console.log(fileList)
    },
    backPage () {
      if (this.backTitle === '返回') {
        this.isUpload = true
        this.backTitle = '取消'
      } else if (this.backTitle === '取消') {
        this.$router.push('/index')
      }
    }
  }
}
</script>

<style scoped>
.createSign{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 10;
}
.createSign-title {
  height: 70px;
}
.createSign-title i{
  width: 4px;
  height: 16px;
  background: #5290FF;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}
.createSign-title h3{
  margin: 0 37px;
  padding-left: 20px;
  font-size: 18px;
  line-height: 70px;
  font-weight: bold;
  border-bottom: 1px solid rgba(187, 187, 187, 0.43);
}
.upload-box{
  margin: 0 37px;
  border-bottom: 1px solid rgba(187, 187, 187, 0.43);
  margin: 0 32px;
  padding: 20px;
  display: flex;
  margin-bottom: 338px;
}
.upload-box >>> .el-upload-dragger{
  width: 384px;
  height: 341px;
  background-color: rgba(0, 0, 0, 0.02);
  position: relative;
  margin-right: 62px;
}
.upload-box >>> .upload-demo-box{
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.upload-box >>> .el-icon-upload{
  margin: 0;
  margin-bottom: 21px;
}
.upload-box >>> .el-upload__text{
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
}
.upload-box >>> .el-upload__text p{
  color: rgba(0, 0, 0, 0.43);
  font-size: 14px;
}
.upload-messages{
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
}
.upload-messages >>> .el-icon-info{
  font-size: 24px;
  margin-right: 16px;
}
.upload-messages-title{
  margin-bottom: 30px;
}
.upload-messages-main{
  margin-left: 40px;
}
.next-btn{
  display: flex;
  justify-content: center;
}
.next-btn >>> .el-button--primary{
  margin-right: 24px;
}
.file-message-box{
  margin: 0 37px;
  padding-left: 28px;
  padding-top: 22px;
  display: flex;
  border-bottom: 1px solid rgba(187, 187, 187, 0.43);
  padding-bottom: 18px;
  margin-bottom: 338px;
}
.file-pic{
  width: 384px;
  height: 341px;
  border-radius: 4px 4px 4px 4px;
  background-color: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-right: 53px;
}
.file-pic-title{
  height: 40px;
  margin: 0 4px;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid rgba(187, 187, 187, 0.38)
}
.file-pic-pdf{
  height: 300px;
  position: relative;
}
.file-pic-pdf >>> canvas{
  width: 200px !important;
  height: 280px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.file-message{
  padding-top: 10px;
}
.file-message-item {
  display: flex;
  margin-bottom: 21px;
  align-items: center;
}
.file-message-item span{
  display: block;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-weight: bold;
  margin-right: 20px;
  white-space: nowrap;
}
.file-message-item i{
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-style: normal;
}
.file-message-item >>> .el-input{
  width: 360px;
  height: 35px;
  font-size: 14px;
  color: rgba(144, 147, 153, 1);
}
</style>
